<template>
    <el-dialog
            width="65%"
            title="员工信息"
            :visible.sync="visible"
            :close-on-click-modal="false">

        <div class="container_tree">
            <div class="body_wrap_tree">

                <el-card class="left_wrap_tree" shadow="hover" ref="content_card">
                    <div class="header_wrap">
                        <div class="left">
                            <i class="el-icon-edit-outline"></i> 机构/部门
                        </div>
                        <div class="right">
                            <el-button @click="handleExpand" size="small" class="btn_ext" plain type="primary" icon="el-icon-s-operation"/>
                        </div>
                    </div>

                    <div class="tree_wrap">
                        <el-input v-model="filterText" clearable placeholder="请输入名称搜索" size="small" suffix-icon="el-icon-search"></el-input>
                        <el-tree
                            v-loading="loading"
                            :show-checkbox="false"
                            node-key="id"
                            ref="tree"
                            :data="tree"
                            :props="defaultProps"
                            :default-expand-all="false"
                            :expand-on-click-node="false"
                            :default-expanded-keys="exapndKeys"
                            :filter-node-method="filterNode"
                            @node-click="handleNodeClick">
                            <span class="custom-tree-node" slot-scope="{ node, data }">
                                <span>{{ node.label }}</span>
                            </span>
                        </el-tree>
                    </div>
                </el-card>

                <el-card class="right_wrap_tree" shadow="hover" ref="content_card">
                    <div class="header_wrap">
                        <div class="left">
                            <i class="el-icon-edit-outline"></i> 查看
                            <span v-if="checkedNode">
                                [{{ checkedNode.name }}]
                            </span>

                        </div>
                        <div class="right">
                            <el-form ref="search" :inline="true" :model="queryParams" size="medium">
                                <el-form-item label="" prop="keyword">
                                    <el-input placeholder="请输入..." prefix-icon="el-icon-search" v-model="queryParams.keyword" clearable/>
                                </el-form-item>

                                <el-button @click="handleSearch" type="primary" size="medium">搜索</el-button>
                                <el-button @click="handleReset" type="info" plain size="medium">重置</el-button>
                                <el-button @click="$refs.table.clearSelection()" type="info" plain size="medium">清空选中</el-button>
                            </el-form>
                        </div>
                    </div>

                    <div class="table_list_wrap">
                        <!-- 表格 -->
                        <el-table
                            class="mt10"
                            ref="table"
                            size="medium"
                            height="600"
                            empty-text="暂无数据"
                            element-loading-text="给我一点时间"
                            fit border highlight-current-row
                            v-loading="loadingDataList"
                            :row-key="getRowKey"
                            :data="dataEmpList"
                            @selection-change="handleSelection">

                            <el-table-column
                                type="selection"
                                width="55"
                                prop="selection"
                                :reserve-selection="this.multiple"
                                align="center" />
                            <el-table-column label="工号" prop="workNo" align="left" width="100px" show-overflow-tooltip/>
                            <el-table-column label="姓名" prop="name" align="left" width="100px" show-overflow-tooltip/>
                            <el-table-column label="部门" prop="deptName" align="left" width="150px" show-overflow-tooltip/>
                            <el-table-column label="岗位" prop="postName" align="left" width="150px" show-overflow-tooltip/>
                            <el-table-column label="入职日期" prop="joinDate" align="left" width="120px" show-overflow-tooltip/>
                            <el-table-column label="离职日期" prop="quitDate" align="left" width="120px" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <el-link v-if="scope.row.status == '1' || scope.row.status == '2'" type="danger" :underline="false">{{scope.row.quitDate}}</el-link>
                                    <el-link v-else>-</el-link>
                                </template>
                            </el-table-column>
                            <el-table-column label="在职状态" align="center" width="100px">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.status == '1'" class="primary">在职</span>
                                    <span v-else-if="scope.row.status == '2'" class="info">离职</span>
                                    <span v-else-if="scope.row.status == '3'" class="danger">退休</span>
                                    <span v-else-if="scope.row.status == '4'" class="danger">停薪留职</span>
                                    <span v-else-if="scope.row.status == '5'" class="primary">退休返聘</span>
                                </template>
                            </el-table-column>
                        </el-table>

                        <!-- 分页 -->
                        <TablePaginationComponents
                            class="mb10"
                            :total.sync="queryParams.total"
                            :page.sync="queryParams.page"
                            :limit.sync="queryParams.limit"
                            @handleSizeChange="handleSizeChange"
                            @handleCurrentChange="handleCurrentChange"/>

                    </div>
                </el-card>

            </div>

        </div>

        <div slot="footer" class="dialog-footer">
            <el-button @click="visible = false">取 消</el-button>
            <el-button @click="handleConfirm()" type="primary" :submitLoading="submitLoading">提 交</el-button>
        </div>
    </el-dialog>

</template>

<script>
    import XTableMixin from '@/mixin/TableMixin'
    import TablePaginationComponents from '@/views/components/table/table-pagination'
    export default {
        mixins: [XTableMixin],
        components: {
            TablePaginationComponents
        },
        props: {
            // true：多选，false：单选
            multiple: {
                type: Boolean,
                default: true
            },
            /**
             * 当前页面存在多个需要调用的地方，通过triggerEvent来指定触发的事件
             * 默认指定的是data（父组件@data）
             */
            triggerEvent: {
                type: String,
                default: 'data'
            }
        },
        data() {
            return {
                visible: false,
                submitLoading: false,

                extText: '展开',
                loading: false,
                loadingDataList: false,
                submitLoading: false,

                tree: [],
                filterText: "",
                defaultProps: {
                    label: 'name',
                    children: 'children'
                },
                expand: false,
                checkedNode: null,
                exapndKeys: [],
                arrayKes: [],

                queryParams: {
                    deptIds: null,
                    workNo: null,
                    name: null,
                    sex: null,
                    post: null,
                },
                dataEmpList: [],
            }
        },

        mounted() {
            this.$nextTick(() => {
            })
        },

        //监控data中的数据变化
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            }
        },

        methods: {

            show() {
                this.visible = true

                this.$nextTick(() => {
                    if(this.selectionRows || this.selectionRows.length > 0) {
                        this.$refs.table.clearSelection();
                        this.queryParams.page = 1
                    }

                    // 加载数据
                    this.getListWithTree()
                    this.getDataList()
                })
            },


            /**
             * 获取数据
             */
            async getListWithTree() {
                this.loading = true
                const res = await this.$http({
                    url: '/hr/dept/listWithTree',
                    method: 'GET'
                })
                if (this.ResultMessage(res, false)) {
                    if(res.data) {
                        this.tree = res.data
                        let keys = []
                        this.getKeys(keys, this.tree)
                        this.keys = keys
                    } else {
                        this.tree = []
                    }
                }
                this.loading = false
            },

            /**
             * 获取节点详情
             */
            handleNodeClick(data, node, e) {
                this.checkedNode = data
                this.queryParams.deptIds = data.id
                this.$refs.search.resetFields()
                this.handleResetPage()
                this.getDataList()
            },

            /**
             * 获取表格数据
             */
            async getDataList() {
                this.loadingDataList = true
                const res = await this.$http({
                    url: '/hr/employee/page',
                    method: 'GET',
                    params: this.queryParams
                })
                if (this.ResultMessage(res, false)) {
                    this.dataEmpList = res.data.records || []
                    this.queryParams.total = res.data.total
                }
                this.loadingDataList = false
            },


            /**
             * 数据选中
             * @param {*} selection
             */
            handleSelection(selection) {
                if(!this.multiple) {    // 单选
                    if (selection.length >= 2) {
                        let arrays = selection.splice(0, selection.length - 1);
                        arrays.forEach((row) => {
                            this.$refs.table.toggleRowSelection(row);
                        });
                    }
                    this.selectionRows = selection
                } else {    // 多选
                    this.selectionRows = selection
                }
            },

            /**
             * 保存选中的数据id,row-key就是要指定一个key标识这一行的数据
             * @param {*} row
             */
            getRowKey(row) {
                return row.id
            },

            /**
             * 确认选择数据，传回父组件
             */
            handleConfirm() {
                this.$emit(this.triggerEvent, this.selectionRows)
                this.visible = false
            },

            /**
             * 搜索
             */
            handleSearch() {
                this.handleResetPage()
                this.getDataList()
            },

            /**
             * 重置搜索表单
             */
            handleReset() {
                this.handleResetPage()
                this.$refs.search.resetFields()
                this.queryParams.deptIds = null
                this.checkedNode = null
                this.getDataList()

            },

            /**
             * 获取所有节点id
             */
            getKeys(keys, tree) {
                tree.forEach(item => {
                    keys.push(item.id)
                    if(item.children && item.children.length > 0) {
                        this.getKeys(keys, item.children)
                    }
                })
            },

            /**
             * 收起或展开
             */
            handleExpand() {
                if(!this.expand) {
                    this.expand = true
                    this.exapndKeys = this.keys
                } else {
                    this.expand = false
                    this.exapndKeys = []
                     for(let i = 0; i < this.$refs.tree.store._getAllNodes().length; i++){
                        this.$refs.tree.store._getAllNodes()[i].expanded = false;
                    }
                }
            },

            /**
             * 树节点过滤
             */
            filterNode(value, data) {
                if (!value) return true;
                return data.name.indexOf(value) !== -1;
            }
        }

    }
</script>

<style lang="scss">
.container_tree{
    .body_wrap_tree{
        display: flex;

        .left_wrap_tree{
            .el-card__body {
                padding: 0px;
            }
        }
        .right_wrap_tree{
            .el-card__body {
                padding: 0px;
            }
        }
    }
}
</style>
<style lang="scss" scoped>
.container_tree{
    .body_wrap_tree{
        display: flex;
        padding: 10px;
        .left_wrap_tree{
            display: flex;
            flex-direction: column;
            width: 250px;
            .header_wrap{
                display: flex;
                width: 100%;
                height: 35px;
                padding: 10px;
                display: flex;
                align-items: center;
                border-bottom: 1px solid #ddd;
                font-size: 16px;
                justify-content: space-between;
                .right{
                    margin-right: 20px;
                }
                .el-icon-edit-outline{
                    font-size: 18px;
                    margin-right: 5px;
                }
                .btn_ext{
                    margin-left: 10px;
                }
            }
            .tree_wrap{
                padding: 10px;

                .custom-tree-node {
                    flex: 1;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-size: 14px;
                    padding-right: 8px;
                }

                .el-input{
                    margin-bottom: 10px;
                }
            }
        }
        .right_wrap_tree{
            flex: 1;
            margin-left: 10px;

            .header_wrap{
                width: 100%;
                height: 35px;
                padding: 10px;
                display: flex;
                align-items: center;
                justify-content:space-between;
                border-bottom: 1px solid #ddd;
                font-size: 16px;
                .el-icon-edit-outline{
                    font-size: 18px;
                    margin-right: 5px;
                }
                .btn_ext{
                    margin-left: 10px;
                }
                .left {}
                .right {
                    display: flex;
                    align-items: center;
                    margin-right: 20px;
                    .el-form{
                        .el-form-item{
                            margin-bottom: 0;
                        }
                    }
                }
            }
            .table_list_wrap{

            }


        }
    }
}

</style>
